<template>
    <div>
        <h1>养老机构列表</h1>
        机构名称:<input type="text" v-model="info.JgName">
        特色服务: <select v-model="info.SevenName">
                        <option value="">请选择</option>
                        <option v-for="item in xlk" :value="item.JGtypeName">{{item.JGtypeName}}</option>
                    </select>
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <input type="button" value="批量发布" class="btn btn-success" @click="upstateall(1)">
        <input type="button" value="导出" class="btn btn-info" @click="Export">
        <table class="table table-bordered">
            <tbody class="bg-info">
                <tr class="bg-primary">
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkall">
                    </td>
                    <td>机构名称</td>
                    <td>特色服务</td>
                    <td>机构封面</td>
                    <td>地址</td>
                    <td>联系方式</td>
                    <td>状态</td>
                    <td>详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list":key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkone">
                    </td>
                    <td>{{item.JgName}}</td>
                    <td>{{item.SevenName}}</td>
                    <td><img :src="item.JgImg" width="50" height="50"></td>
                    <td>{{item.Addres}}</td>
                    <td>{{item.Phone.substring(0,3)+'****'+item.Phone.substring(7)}}</td>
                    <td><b>{{item.State==1?'已发布':'待发布'}}</b></td>
                    <td>{{item.Desc}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="dele(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <span>共<b>{{data.totalCount}}</b>条</span>
        <span>每页<b>{{info.pagesize}}</b>条</span>
        <span>共<b>{{info.pageindex}}/{{data.totalPage}}</b>页</span>

        <input type="button" value="首页" @click="Fenpage(1)">
        <input type="button" value="上一页" @click="Fenpage(info.pageindex-1)">
        <span v-for="item in data.totalPage" @click="Fenpage(item)">{{item}}</span>
        <input type="button" value="下一页" @click="Fenpage(info.pageindex+1)">
        <input type="button" value="尾页" @click="Fenpage(data.totalPage)">

        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="Fenpage(info.pageindex)">
        
        <select v-model="info.pagesize" @click="show">
            <option v-for="item in arr" :value="item">每页{{item}}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'mooment';
import{useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
    pageindex:1,
    pagesize:2,
    JgName:'',
    SevenName:'',
})
let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[],
})

onMounted(()=>{
    gettype();
    getjglist();
})
//=========================特色下拉框===========
let xlk:any=ref([]);

const gettype=()=>{
    axios({
        url:'https://localhost:7268/api/JG/GetJgtype',
        method:'get',
        params:xlk,
    })
    .then(res=>{
        console.log(res);
        xlk.value=res.data;
    })
}
//=================分页===================
const Fenpage=(num:any)=>{
    if(num>=1 && num<=data.totalPage){
        info.pageindex=num;
        getjglist();
    }
    else{
        alert('超出页码范围');
        return;
    }
}

let arr:any=ref([2,3,4,5,6]);

const show=()=>{
    info.pageindex=1;
    getjglist();
}
//=======================列表================
const getjglist=()=>{
    axios({
        url:'https://localhost:7268/api/JG/GetJGList',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//==================逻辑删除========================
const dele=(id:any)=>{
    if(confirm('确认删除吗')){
        axios({
            url:'https://localhost:7268/api/JG/Deljg',
            method:'delete',
            params:{
                ids:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getjglist();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//=====================全选/全取消===========================
let checked:any=ref(false);
let ids:any=ref([]);
//全选
const checkall=()=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        })
    }
    else{
        ids.value=[];
    }
}
//反选
const checkone=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//==================批量修改状态=======================
const upstateall=(state:any)=>{
    if(confirm('确认修改吗')){
        axios({
            url:'https://localhost:7268/api/JG/Upstate',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                ids.value=false;
                checked.value=false;
                getjglist();
            }
            else{
                alert('修改失败');
            }
        })
    }
}
//==================导出=============
const Export=()=>{
    location.href=`https://localhost:7268/api/JG/ExportExal?pageindex=${info.pageindex}&pagesize=${info.pagesize}
    &JgName=${info.JgName}&SevenName=${info.SevenName}`
}
</script>

<style scoped>
span{
    margin: 0 10px;
}
b{
    color: red;
}
input{
    margin: 0 10px;
}
</style>